<template>
  <div>
    <div class="item-line">
      <div>输入字段</div>
      <div class="param-item">
        <div class="param-type">类型</div>
        <div class="param-name">字段名称</div>
        <div class="param-required">必填</div>
        <div class="param-operate">操作</div>
      </div>
      <div
        v-for="(param, index) in data.outputList"
        :key="index"
        class="param-item"
      >
        <div class="param-type">
          <ac-select v-model="param.type" options="文本,图片,文件" :disabled="param.builtin" />
        </div>
        <div class="param-name">
          <ac-input v-model="param.name" />
        </div>
        <div class="param-required">
          <ac-switch
            v-model="param.required"
            :disabled="param.builtin"
            :options="[{key: true, value: ''}, {key: false, value: ''}]"
          />
        </div>
        <div class="param-operate">
          <ac-icon
            v-if="!param.builtin"
            size="14"
            color="red"
            iconId="018dc9c3efd3a0502886"
            title="删除"
            @click.stop="deleteParam(index)"
          />
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button" @click="addParam">
        <ac-icon iconId="018dca3b4707c4c43a2f" size="16" /> 添加字段
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import tool from "@/utils/tool";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        outputList: []
      }
    }
  },
  sourceParamOptions: {
    type: Object,
    default: () => {}
  }
});

const data = ref(props.data);

const addParam = () => {
  if (!data.value.outputList) {
    data.value.outputList = [];
  }
  data.value.outputList.push({id: tool.uuid()});
};

const deleteParam = (index) => {
  data.value.outputList.splice(index, 1);
};
</script>

<style scoped>
.item-line {
  margin-top: 15px;
  >div:first-child {
    margin-bottom: 5px;
  }
}
.param-item {
  margin-top: 5px;
  display: flex;
  flex-direction: row;
  .param-type {
    width: 100px;
    flex-shrink: 0;
  }
  .param-required {
    width: 50px;
    flex-shrink: 0;
    text-align: center;
  }
  .param-operate {
    width: 30px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .ac-icon {
      cursor: pointer;
    }
  }
  .param-name {
    flex-grow: 1;
  }
}
.button-box {
  margin-top: 10px;
  display: flex;
  align-items: center;
  .button {
    color: #67C23A;
    cursor: pointer;
    display: flex;
    align-items: center;
    .ac-icon {
      margin-right: 8px;
    }
  }
}
</style>